<template>
  <van-popup v-model="show" class="more" round>
    <van-cell-group v-if="isjuBao === false">
      <van-cell title="不感兴趣" @click="sick" icon="bill-o" class="no1" />
      <van-cell
        title="反馈垃圾内容"
        icon="warning-o"
        class="no2"
        is-link
        @click="isjuBao = true"
      />
      <van-cell
        title="拉黑作者"
        icon="delete"
        class="no3"
        @click="blacklists"
      />
      {{ artidList }}
    </van-cell-group>

    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isjuBao = false" />
      <van-cell
        v-for="(item, index) in juBao"
        :key="index"
        :title="item.name"
        @click="report(item.type)"
      ></van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script>
/*
主页数据数据的结构 & 样式
   a 主页看起来整洁,利用单元格,也利用了插槽,包着标题,图片,作者,评论,事件
   b 其中图片也利用了vant中的功能,为了节约性能,节省用户流量,lazy-load懒加载功能,叉叉和评论区域,主要用了flex布局,justify-content: space-between;周边留有空白,其它的看效果图调整
   c 时间有些不同,是利用了dayjs().fromat('YYYY-MM-DD hh:mm:ss')来进行转换的,定义一个过滤器,main.js可以在全局使用
  



  首页数据 - 动态渲染数据
   a 根据页面频道数据articleList(代表每个页面的每条数据),遍历subitem.属性 来渲染


叉叉- 将面板封装为一个组件
  a 在index文件夹内在新建一个com文件夹,再建一个一个more.vue文件
  b more.vue文件,看效果图用到了弹框,宫格,图标,箭头,在vant官网里看
  c 在弹框绑定v-model="show",先让能看的出来,在date里面改为true,在父页面添加子标签,ref  点击事件refs.more.ishow=true打开弹框


不感兴趣
  a 点击叉叉,弹出弹框(携带父组件的文字id),父组件data里面定义,本页面props接收
  b 在给不感兴趣添加一个点击事件,this.$emit('delsc', this.artidList)触发父组件的方法,携带参数id过去
  c. 父组件添加删除的方法,先获取子组件对应的点击频道的id
  d.确定好是当前页面,循环遍历当前页面所有的文章,在判断当前页面的id跟子组件点击的id是否相同,相同的话就利用splice(index,1)来删除
  e.再到子页面发送请求到服务器,把删除的文章,标记为不喜欢.async await 
  f.但会报400的错误,解决给拦截器添加jsonbig.parse,原因是js精度的丢失.


  反馈垃圾内容
    a.先在本页面下写页面的结构, van-cell-group,再到服务器复制所需要的反馈垃圾的类别,,在data里面定义一个数组来装起来
    b.利用v-for来循环定义好的数组内容,渲染到页面上,在写最上面添加一个向左的箭头,用来返回不敢兴趣的页面
    c.给每个举报的选项添加一个点击事件,传参是.type,相当于每个举报选项的id
    d.在判断它有没有token,
    e,有token,向服务器发送请求(封装一个,反馈垃圾内容的api),有两个参数,举报文章的id和type
    f.发送服务器后在弹框提示举报成功,没有登录就提示未登录,关闭弹窗
    g.还要个问题,每次打开弹窗,应该在不感兴趣页面,但是却在举报的页面,应该改this.isjuBao = false



拉黑作者
  a.先在父页面定义一个作者文章id,在赋值给他,在子标签上绑定,在本页面props接收
  b.在给拉黑添加一个点击事件
  c.判断用户是否登录,登录就向服务器发送请求,没有登录就提示未登录,最后改弹框隐藏,改为false


*/

import { moreDislikes, moreReports, moreBlacklists } from '@/api/more.js' // 不喜欢,举报,拉黑
import { getLocal } from '@/utils/local.js'
export default {
  props: ['artidList', 'leheiid'],
  data () {
    return {
      show: false, // 展开框
      // 举报类型数组
      juBao: [
        { type: 0, name: '其他问题' },
        { type: 1, name: '标题夸张' },
        { type: 2, name: '低俗色情' },
        { type: 3, name: '错别字多' },
        { type: 4, name: '旧闻重复' },
        { type: 5, name: '广告软文' },
        { type: 6, name: '内容不实' },
        { type: 7, name: '涉嫌违法犯罪' },
        { type: 8, name: '侵权' }
      ],
      // 控制举报类型
      isjuBao: false
    }
  },
  methods: {
    // 拉黑作者 先做父组件,data定义一个id值,弹出框赋值给他,在子组件标签绑定事件,本页面props接收,在拉黑添加点击事件,获取token,判断token,有token就给服务器传id值,下次就看不到这个作者了,提示成功,没有登录就提示请登录,最后隐藏弹出框
    async blacklists () {
      const token = getLocal('token')
      if (token && token.token) {
        moreBlacklists(this.leheiid)
        this.$toast.success('拉黑成功')
      } else {
        this.$toast.fail('请您登陆!')
      }
      this.show = false
    },
    //反馈垃圾内容 获取token,判断token,如果有就反馈成功提交到服务器,提示信息,关闭弹框,没有登录就提示未登录,最后要返回反馈页面
    async report (type) {
      const token = getLocal('token')
      if (token && token.token) {
        await moreReports({
          id: this.artidList,
          type: type
        })
        this.$toast.success('成功了,继续加油!')
      } else {
        this.$toast.fail('你还未登录')
      }
      this.show = false
      this.isjuBao = false
    },
    //不感兴趣点击事件    将对应的文章从主页中删除,..触发父组件的方法,  发送服务器标识为不喜欢
    async sick () {
      this.$emit('delsc', this.artidList)
      const res = await moreDislikes(this.artidList)
      console.log(res)
      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>
.more {
  width: 90%;
  border-radius: 10px;
}
.no1 {
  color: skyblue;
}
.no2 {
  color: pink;
}
.no3 {
  color: yellowgreen;
}
</style>
